// MonacoEditor
$monaco-border-color: #282f3a;
$monaco-suggest-color: #d4d4d4;
$monaco-bgcolor-readonly: var(--el-bg-color);
$monaco-fullscreen-dialog-bgcolor: var(--el-bg-color);
$monaco-action-color: #bfbfbf;
$background-color: var(--el-bg-color);

.monaco-editor .margin-view-overlays .codicon-chevron-right,
.monaco-editor .margin-view-overlays .codicon-chevron-down {
	font-size: 100% !important;
}

.monaco-editor .suggest-widget {
	// TODO: 不生效
	width: 200px;
}

.monaco-editor .monaco-editor-overlaymessage {
	padding-bottom: 8px;
}

.monaco-editor .monaco-editor-overlaymessage.fadeIn {
	animation: monaco-fade-in 150ms ease-out;
}

.monaco-editor .monaco-editor-overlaymessage.fadeOut {
	animation: monaco-fade-out 100ms ease-out;
}

.monaco-editor .monaco-editor-overlaymessage .message {
	padding: 1px 4px;
}

.monaco-editor .monaco-editor-overlaymessage .anchor {
	width: 0 !important;
	height: 0 !important;
	border-color: transparent;
	border-style: solid;
	z-index: 1000;
	border-width: 8px;
	position: absolute;
}

@keyframes monaco-fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes monaco-fade-out {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

.datav-editor {
	position: relative;
	height: 240px;
	padding: 0;
	overflow: hidden;
	border: 1px solid $monaco-border-color;
	background: $background-color;

	.datav-editor-actions {
		position: absolute;
		right: 10px;
		bottom: 5px;
		z-index: 1;
		width: 40px;
		font-size: 12px;
		text-align: right;

		.action-btn {
			padding: 4px;
			font-size: 12px;
			color: $monaco-action-color;
			cursor: pointer;
			transition: color 0.2s;

			&:hover {
				color: var(--el-color-primary);
			}
		}
	}

	&.--read-only {
		.margin,
		.monaco-editor-background {
			background-color: $monaco-bgcolor-readonly;
		}
	}
}


